<template>
  <div>
    <!-- 列表 -->

    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #title
        ><a-button type="primary" @click="add" v-has="{ a: $route, b: 2 }"
          >新增</a-button
        ></template
      >
      <template #operation="{ record }">
        <a-button
          type="link"
          @click="edit(record.key)"
          v-has="{ a: $route, b: 2 }"
          >编辑</a-button
        >
        <a-button
          type="link"
          danger
          @click="del(record.key)"
          v-has="{ a: $route, b: 2 }"
          >删除</a-button
        >
      </template>
    </a-table>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { useModal } from "@/hooks"
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
  },
  setup() {
    const loading = ref(false); //表格的加载

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
    });

    const columns = [
      {
        title: "服务名称",
        dataIndex: "id",
        className: "table",
      },
      {
        title: "服务项目",
        dataIndex: "title",
        className: "table",
      },
      {
        title: "排序",
        dataIndex: "address",
        className: "table",
      },
      {
        title: "价格",
        dataIndex: "views",
        className: "table",
      },
      {
        title: "服务时长/次数",
        dataIndex: "status",
        className: "table",
      },
      {
        title: "介绍",
        dataIndex: "time",
        className: "table",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ];
    const dataSource = [
      {
        key: "1",
        id: "John Brown",
        title: "￥300,000.00",
        address: "New York No. 1 Lake Park",
        views: "12",
        status: "状态",
        time: "1020202",
      },
    ];

    for (let i = 0; i < 20; i++) {
      dataSource.push({
        key: i + 2,
        id: i,
        title: "￥300,000.00",
        address: "New York No. 1 Lake Park",
        views: "12",
        status: "状态",
        time: "1020202",
      });
    }

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: 0,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
    };

    // 新增
    const add = () => {};
    // 编辑
    const edit = () => {};

    // 删除
    const del = (key) => {
      const {closeModal} = useModal.confirm({
        title: () => "你确定删除当前项吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode(
            "div",
            {
              style: "color:#faad14;",
            },
            "删除当前数据后不可恢复，请谨慎考虑。"
          ),

        class: "test",
      });
    };
    return {
      dataSource,
      columns,
      loading,
      pagination,
      add,
      del,
      edit,
    };
  },
};
</script>
<style scoped lang="less">
.act {
  color: #2a9d8f;
}
</style>
